<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>流程设计器</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.6.8/css/layui.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://www.layuicdn.com/layui-v2.6.8/layui.js"></script>
    <script src="js/jquery-ui/1.11.4/jquery-ui.min.js"></script>
    <script src="js/jquery.jsPlumb-1.7.6-min.js"></script>
    <script src="js/node_attr_data.js"></script>
    <script src="js/popup_member.js"></script>
    <script src="js/flow_design.js"></script>
</head>

<body>

<div class="flow-design-hd">
    <div><i class="fa fa-bell"></i> 拖动添加节点，然后连接节点设置流程关系</div>
    <div>
        <button class="layui-btn layui-btn-sm layui-btn-primary layui-btn-radius flow-save">保存流程图</button>
        <button class="layui-btn layui-btn-sm layui-btn-normal layui-btn-radius">启用流程</button>
    </div>
</div>
<div class="flow-design-bd">
    <div class="flow-design-left">
        <div class="flow-design-tools">
            <div class="item" data-index="1" data-type="origin"><i class="fa fa-play-circle-o"></i><span class="name">流程发起</span></div>
            <div class="item" data-index="3" data-type="node"><i class="fa fa-code-fork"></i><span class="name">流程节点</span></div>
            <div class="item" data-index="4" data-type="ccnode"><i class="fa fa-send-o"></i><span class="name">抄送节点</span></div>
            <!-- <div class="item" data-index="5"><i class="fa fa-calendar-check-o"></i>审批节点</div> -->
            <!-- <div class="item" data-index="2"><i class="fa fa-random"></i>子流程</div> -->
            <div class="item" data-index="6" data-type="end"><i class="fa fa-power-off"></i><span class="name">流程结束</span></div>
            <!-- <div class="line"></div>
            <a href="javascript:;" class="del layui-icon layui-icon-delete"></a> -->
        </div>
        <div id="flow-main"></div>
    </div>
    <div class="flow-design-right">
        <div class="layui-tab layui-tab-brief fdr-top-tab" lay-filter="right-side-tab">
            <ul class="layui-tab-title">
                <li lay-id="1">节点属性</li>
                <li lay-id="2" class="layui-this">流程属性</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item">
                    <form class="layui-form" id="node-attr-form" lay-filter="node-attr-form">
                    </form>
                    <div class="empty"><p>请选择节点</p></div>
                </div>
                <div class="layui-tab-item layui-show">
                    <form class="layui-form" lay-filter="flow-attribute-form">
                        <div class="fdr-title">流程提醒</div>
                        <div class="fdr-item"><input type="checkbox" name="remindWx" lay-skin="primary" title="使用微信提醒节点负责人、抄送人"></div>
                        <div class="fdr-item"><input type="checkbox" name="remindEmail" lay-skin="primary" title="使用邮件提醒节点负责人、抄送人"></div>
                        <div class="fdr-item">
                            <h6>流程发起后允许撤回<em class="fdr-tips layui-tips" data-tips="开启功能后，当后续节点负责人尚未处理时，发起人可撤回流程。" data-placement="top">?</em></h6>
                            <input type="checkbox" name="withdraw" lay-skin="switch" lay-filter="" lay-text="开|关">
                        </div>
                        <div class="fdr-item">
                            <h6>允许流程发起人催办<em class="fdr-tips layui-tips" data-tips="开启功能后，当后续节点负责人尚未处理时，发起人可向其发送催办通知。" data-placement="top">?</em></h6>
                            <input type="checkbox" name="urge" lay-skin="switch" lay-filter="" lay-text="开|关">
                        </div>
                        <div class="fdr-item">
                            <h6>允许查看流程日志和流转图<em class="fdr-tips layui-tips" data-tips="开启功能后，节点负责人可以查看流程日志和流转图。" data-placement="top">?</em></h6>
                            <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="" lay-text="开|关">
                        </div>
                        <hr>
                        <div class="fdr-title">自动提交规则<em class="fdr-tips layui-tips" data-tips="设置自动提交规则后，系统会帮助该流程内满足下述规则的负责人自动提交流程数据，无需人为操作。" data-placement="top">?</em></div>
                        <div class="fdr-item">
                            <div style="flex:1">
                                <select name="rule">
                                    <option value="0" selected>不启用</option>
                                    <option value="1">负责人与上一节点处理人相同</option>
                                    <option value="2">负责人处理过该流程</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html> 